
#content #left .profile {
    height: 100px;
    margin-top: 25px;
    position: relative;
}

#content #left .profile .avatar {
    display: block;
    height: 100px;
    width: 100px;
}

#content #left .profile .avatar-mask-100 {
    background: url("/static/img/avatar_masks.png?v=20130218") 0 -130px;
    height: 100px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100px;
}

#content #left .profile .summary {
    margin-left: 20px;
    max-width: 400px;
    padding: 5px 0;
}

#content #left .profile .short-summary {
    max-width: 300px;
}

#content #left .profile .summary .name {
    color: #4abdcc;
    font-size: 18px;
    height: 35px;
    line-height: 20px;
}

#content #left .profile .summary .bio {
    color: #999999;
    font-size: 12px;
    max-height: 45px;
    line-height: 15px;
    overflow-y: hidden;
}

#content #left .profile .summary .link {
    color: #4abdcc;
    font-size: 12px;
    height: 15px;
    line-height: 15px;
}

#content #left .profile .summary a.fill-profile-btn {
    background: #4abdcc;
    color: #ffffff;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #5c5c5c;
    width: 112px;
}

#content #left .profile .summary a.fill-profile-btn:hover {
    background: #2e9dab;
}

#content #left .profile .buttons {
    right: 0px;
    top: 0px;
    width: 104px;
}

#content #left .profile .long-buttons {
    width: 218px;
}

#content #left .profile .buttons .btn {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    text-shadow: 1px 1px 1px #5c5c5c;
}

#content #left .profile .buttons a.btn {
    text-decoration: none;
}

#content #left .profile .buttons .hint {
    color: #999;
    font-size: 12px;
    padding-top: 10px;
    text-align: center;
}

#content #left .profile .create-trip {
    background-color: #bad424;
    height: 40px;
    line-height: 40px;
    text-decoration: none;
    width: 104px;
}

#content #left .profile .create-trip:hover {
    background: #a4bd15;
}

#content #left .profile .friend-status {
    color: white;
    cursor: pointer;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-shadow: 1px 1px 1px #5c5c5c;
    width: 104px;
}

#content #left .profile .not-friend {
    background: #bad424;
}

#content #left .profile .not-friend:hover {
    background: #a4bd15;
}

#content #left .profile .is-friend {
    background: #4abdcc;
    height: 32px;
    line-height: 32px;
}

#content #left .profile .is-friend:hover {
    background: #2e9dab;
}

#content #left .profile .buttons .wait-confirm{
    background: #ffcb5b;
    cursor: default;
}

#content #left .profile .accept-friend {
    background: #4abdcc;
    height: 32px;
    line-height: 32px;
}

#content #left .profile .accept-friend:hover {
    background: #2e9dab;
}

#content #left .profile .reject-friend {
    background: #bad424;
    height: 32px;
    line-height: 32px;
    margin-left: 10px;
}

#content #left .profile .reject-friend:hover {
    background: #a4bd15;
}

#content #left .profile a.message-btn {
    background: #bad424;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 6px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #5c5c5c;
    width: 104px;
}

#content #left .profile a.message-btn:hover {
    background: #a4bd15;
}

#content #left .tabs-wrapper {
    position: relative;
}

#content #left #ajax-indicator {
    left: 304px;
    position: absolute;
    top: 110px;
}

#content #user-summary {
    height: 1%;
    margin-top: 30px;
    overflow: hidden;
    width: 640px;
}

#content #user-summary .item-space {
    height: 6px;
    width: 100%;
}

#content #user-summary .left-top {
    background: #ffffff url("/static/img/trip_icons.png?v=2?v=20120718") 0 -568px no-repeat;
    float: left;
    height: 64px;
    width: 17px;
}

#content #user-summary .mileage {
    height: 64px;
}

#content #user-summary .mileage .content {
    background: #f2f2f2;
    height: 64px;
    width: 623px;
}

#content #user-summary .mileage .content .mileage-icon {
    background: url("/static/img/trip_icons.png?v=2?v=20120718") -80px -568px no-repeat;
    color: #999999;
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    margin: 18px 0 0 7px;
    padding-left: 37px;
    width: 100px;
    _margin-left: 0;
}

#content #user-summary .mileage .content .mileage-num {
    color: #4abdcc;
    font-size: 36px;
    font-weight: bold;
    line-height: 64px;
    padding-right: 24px;
}

#content #user-summary .mileage .content .mileage-num span.mileage-km {
    font-size: 18px;
    margin-left: 6px;
}

#content #user-summary .passport-panel {
    background: #f2f2f2;
    position: relative;
    width: 640px;
    height: 129px;
}

#content #user-summary .passport-panel .content {
    border-bottom: 1px solid #eaeaea;
    height: 62px;
    margin: 0 24px 0 7px;
    width: 592px;
    _margin-right: 12px;
}

#content #user-summary .passport-panel .content .passport-icon {
    background: url("/static/img/trip_icons.png?v=2?v=20120718") -80px -598px no-repeat;
    color: #999999;
    font-size: 14px;
    height: 34px;
    line-height: 42px;
    _line-height: 34px;
    margin: 18px 0 0 1px;
    padding-left: 36px;
    width: 100px;
}

#content #user-summary .passport-panel .content .passport-num {
    color: #4abdcc;
    font-size: 36px;
    font-weight: bold;
    line-height: 64px;
}

#content #user-summary .passport-panel .content .passport-num span.passport-unit {
    font-size: 14px;
    font-weight: normal;
    margin-left: 6px;
}

#content #user-summary .passport-panel .passport-icons {
    background: #f2f2f2;
    clear: both;
    padding: 7px 0 0 32px;
    width: 560px;
}

#content #user-summary .passport-panel .collapsed {
    max-height: 55px;
    overflow: hidden;
    position: relative;
}

#content #user-summary .passport-panel .passport-icons .icon-item {
    height: 46px;
    margin: 0 10px 12px 0;
    position: relative;
    width: 46px;
}

#content #user-summary .passport-panel .passport-icons .icon-item .icon {
    height: 46px;
    overflow: hidden;
    width: 46px;
    cursor: pointer;
}

#content #user-summary .passport-panel .passport-icons .icon-item .icon img {
    margin-left: -17px;
    width: 81px;
}

#content #user-summary .passport-panel .passport-icons .icon-mask-46 {
    background: url("/static/img/trip_icons.png?v=2?v=20120731") -330px -220px no-repeat;
    height: 46px;
    left: 0;
    position: absolute;
    top: 0;
    width: 46px;
}

#content #user-summary .passport-panel .passport-icons .name-mask {
    background: url("/static/img/mobile_trip_icons.png") -15px -220px no-repeat;
    bottom: 0;
    color: #ffffff;
    font-size: 12px;
    min-height: 15px;
    left: -6px;
    line-height: 15px;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    text-align: center;
    width: 52px;
    transition: opacity 0.1s;
    -moz-transition: opacity 0.1s; /* Firefox 4 */
    -webkit-transition: opacity 0.1s; /* Safari and Chrome */
    -o-transition: opacity 0.1s; /* Opera */
    text-decoration: none;
    cursor: pointer;
    _display: none;
}

#content #user-summary .passport-panel .passport-icons .icon-item:hover .name-mask {
    opacity: 1;
    filter: alpha(opacity=100);
}

#content #user-summary .passport-panel .passport-icons .no-passport {
    color: #999999;
    font-size: 14px;
    line-height: 30px;
    margin: 9px 0 0 0;
    padding-bottom: 12px;
    width: 584px;
}

#content #user-summary .passport-panel .passport-icons .no-passport .add-photo {
    background: #4ABDCC;
    border: none;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 14px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #5C5C5C;
    width: 111px;
}

#content #user-summary .passport-panel .passport-icons .no-passport .add-photo:hover {
    background: #2e9dab;
}

#content #user-summary .passport-panel .more-passport {
    background: url("/static/img/trip_icons.png?v=2?v=20120731") -60px -240px no-repeat;
    cursor: pointer;
    height: 24px;
    right: 24px;
    margin: 20px 0 0 5px;
    position: absolute;
    top: 61px;
    width: 24px;
}

#content #user-summary .passport-panel .more-passport-arrow {
    background: url("/static/img/trip_icons.png?v=2?v=20120731") -84px -240px no-repeat;
    height: 24px;
    width: 25px;
    *width: 24px !important;
}

#content #user-summary .map-top-space {
    background: #f2f2f2;
    border-bottom: 1px solid #ffffff;
    height: 5px;
    width: 100%;
}

#content #user-summary .map-widget {
    height: 296px;
    margin-bottom: 20px;
    position: relative;
}

#content #user-summary #map {
    height: 296px;
}

#content #user-summary .map-mask .map-mask-top {
    background: url("/static/img/map_mask_top.png?v=2") repeat-x;
    height: 9px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}

#content #user-summary .map-mask .map-mask-right {
    background: url("/static/img/map_mask_right.png?v=2") repeat-y;
    height: 296px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 9px;
}

#content #user-summary .map-mask .map-mask-bottom {
    background: url("/static/img/map_mask_bottom.png?v=2") repeat-x;
    bottom: 0px;
    height: 9px;
    left: 0px;
    position: absolute;
    width: 100%;
    _bottom: -9px;
}

#content #user-summary .map-mask .map-mask-left {
    background: url("/static/img/map_mask_left.png?v=2") repeat-y;
    height: 296px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 9px;
}

#content #user-summary .map-mask .map-mask-fullscreen {
    background: url("/static/img/trip_icons.png?v=20120924") -36px -672px no-repeat;
    bottom: 12px;
    color: white;
    font-size: 14px;
    height: 66px;
    line-height: 70px;
    padding-left: 44px;
    position: absolute;
    right: 19px;
    text-decoration: none;
    width: 73px;
}

#content #trips-wrapper,
#content #wishtogos-wrapper,
#content #bookmarks-wrapper,
#content #friends-wrapper {
    min-height: 100px;
}

#content #trips-wrapper .hint,
#content #wishtogos-wrapper .hint,
#content #bookmarks-wrapper .hint,
#content #friends-wrapper .hint {
    color: #999999;
    font-size: 14px;
}


#content #trips .trip-item {
    background: #f7f7f7;
    height: 155px;
    margin-bottom: 20px;
    width: 640px;
}

#content #trips .trip-item .cover {
    height: 155px;
    overflow: hidden;
    width: 205px;
    float: left;
}

#content #trips .trip-item .cover img {
    margin-left: -1px;
}

#content #trips .trip-item .summary {
    height: 135px;
    padding: 10px 18px;
    position: relative;
    width: 399px;
}

#content #trips .trip-item .summary a {
    text-decoration: none;
}

#content #trips .trip-item .name {
    display: block;
    font-size: 14px;
    line-height: 20px;
    max-width: 365px;
}

#content #trips .trip-item img.ongoing {
    position: absolute;
    margin-top: 2px;
}

#content #trips .trip-item .user {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    opacity: 0.9;
}

#content #trips .trip-item .date,
#content #trips .trip-item .duration {
    color: #5c5c5c;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    opacity: 0.9;
    width: 399px;
}

#content #trips .trip-item .cities {
    color: #5c5c5c;
    font-size: 12px;
    line-height: 14px;
    margin-top: 5px;
    opacity: 0.9;
    width: 399px;
}

#content #trips .trip-item .meta {
    bottom: 15px;
    color: #999999;
    font-size: 12px;
    line-height: 15px;
    position: absolute;
}

#content #trips .trip-item .meta span {
    margin-left: 2px;
}

#content #trips .trip-item .meta .waypoints {
    background: url("/static/img/trip_icons.png?v=2") 0 -92px no-repeat;
    height: 12px;
    padding-left: 10px;
}

#content #trips .trip-item .meta .mileage {
    background: url("/static/img/trip_icons.png?v=2?v=20120723") -200px -92px no-repeat;
    height: 12px;
    margin-left: 25px;
    padding-left: 16px;
}

#content #trips .trip-item .meta .comment {
    background: url("/static/img/trip_icons.png?v=2?v=20121119") -400px -91px no-repeat;
    height: 12px;
    margin-left: 25px;
    padding-left: 16px;
}

#content #trips .trip-item .meta .followed {
    background: url("/static/img/trip_icons.png?v=2") 0 -110px no-repeat;
    height: 12px;
    margin-left: 25px;
    padding-left: 14px;
}

#content #trips .trip-item .item-actions-buttons {
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 24px;
    background: url("/static/img/trip_detail_icons.png?v=20130204") no-repeat -50px -106px;
    z-index: 10;
}

#content #trips .trip-item .item-actions-btn-left {
    height: 24px;
    width: 41px;
    cursor: pointer;
}

#content #trips .trip-item .item-actions-btn-right {
    height: 24px;
    width: 41px;
    cursor: pointer;
}

#content .wish-to-go-list {
    width: 660px;
}

#content .wish-to-go-list .site-item {
    background: #f2f2f2;
    height: 240px;
    margin: 0 20px 20px 0;
    position: relative;
    width: 200px;
}

#content .wish-to-go-list .site-item a {
    text-decoration: none;
}

#content .wish-to-go-list .site-item:hover .close {
    display: block;
}

#content .wish-to-go-list .site-item .close {
    cursor: pointer;
    height: 24px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 62px;
}

#content .wish-to-go-list .site-item .close .icon {
    background: url("/static/img/trip_icons.png") no-repeat -117px -240px;
    height: 24px;
    width: 5px;
}

#content .wish-to-go-list .site-item .close .text {
    background: #FC5D7B;
    color: #ffffff;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 57px;
}

#content .wish-to-go-list .site-item .close:hover .icon {
    background: url("/static/img/trip_icons.png") no-repeat -117px -264px;
}

#content .wish-to-go-list .site-item .close:hover .text {
    background: #d84561;
}

#content .wish-to-go-list .site-item .photo {
    background-size: 200px auto;
    height: 150px;
}

#content .wish-to-go-list .site-item .info {
    padding: 14px 15px;
}

#content .wish-to-go-list .site-item .info h3 {
    width: 170px;
}

#content .wish-to-go-list .site-item .info .name {
    display: block;
    line-height: 18px;
    font-size: 14px;
    *line-height: 20px;
    *font-size: 13px;
}

#content .wish-to-go-list .site-item .info .name .icon {
    height: 17px;
    margin-right: 5px;
    _margin-top: 2px;
}

#content .wish-to-go-list .site-item .info .name .type-1 {
    background: url("/static/img/tinysite_icons.png?v=20130225") no-repeat -186px -128px;
    width: 18px;
}

#content .wish-to-go-list .site-item .info .name .type-2 {
    background: url("/static/img/tinysite_icons.png?v=20130225") no-repeat -276px -128px;
    width: 16px;
}

#content .wish-to-go-list .site-item .info .name .type-3 {
    background: url("/static/img/tinysite_icons.png?v=20130225") no-repeat -96px -128px;
    width: 15px;
}

#content .wish-to-go-list .site-item .info .name .type-4 {
    background: url("/static/img/tinysite_icons.png?v=20130225") no-repeat -126px -128px;
    width: 19px;
}

#content .wish-to-go-list .site-item .info .name .poi-type-5 {
    background: url("/static/img/tinysite_icons.png?v=20130225") no-repeat -216px -128px;
    width: 17px;
}

#content .wish-to-go-list .site-item .info .name .poi-type-6 {
    background: url("/static/img/tinysite_icons.png?v=20130225") no-repeat -246px -128px;
    width: 12px;
}

#content .wish-to-go-list .site-item .info .name .poi-type-10 {
    background: url("/static/img/tinysite_icons.png?v=20130225") no-repeat -156px -129px;
    width: 19px;
}

#content .wish-to-go-list .site-item .info .parents {
    height: 12px;
    line-height: 12px;
    margin-top: 6px;
}

#content .wish-to-go-list .site-item .info .parents a {
    color: #5c5c5c;
    font-size: 12px;
}

#content .wish-to-go-list .site-item .info .meta {

    margin-top: 14px;
}

#content .wish-to-go-list .site-item .info .meta .visited {
    margin-right: 18px;
}

#content .wish-to-go-list .site-item .info .meta .visited-icon {
    background: url("/static/img/tinysite_icons.png?v=20121010") no-repeat -213px -39px;
    height: 11px;
    margin-right: 3px;
    width: 11px;
}

#content .wish-to-go-list .site-item .info .meta .wish-to-go-icon {
    background: url("/static/img/tinysite_icons.png?v=20121010") no-repeat -232px -40px;
    height: 11px;
    margin-right: 3px;
    width: 11px;
}

#content .wish-to-go-list .site-item .info .meta .text {
    color: #999999;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
}

#content .wish-to-go-list .site-item .info .meta .visited-text {
    margin-right: 18px;
}

#content .friends {
    padding: 1px;
    margin-bottom: 60px;
}

#content .friends .title {
    color: #999999;
    font-size: 18px;
}

#content .friend-item {
    height: 70px;
    margin: 10px 20px 0 0;
    position: relative;
    width: 48px;
}

#content .friend-item a {
    display: block;
}

#content .friend-item a img {
    display: block;
    height: 48px;
    width: 48px;
}

#content .friend-item .avatar-mask-48 {
    background: url("/static/img/avatar_masks.png") 0 -230px;
    height: 48px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 48px;
}

#content .friend-item .username {
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    width: 48px;
    word-break: break-all;
    word-wrap: bread-word;
}

#content .friend-item .username .threedots_ellipsis {
    margin-left: -0.3em;
}

/* Create new trip popup begin */
.popup {
    background: #ffffff;
    border: 1px solid #a3a7af;
    font-size: 14px;
    height: 230px;
    margin: auto;
    position: fixed;
    width: 380px;
    box-shadow: 0px 0px 8px #797877;
    z-index: 2010;
}

.popup .header {
    color: #4abdcc;
    height: 20px;
    padding: 20px 0 0 30px;
}

.popup .header .close {
    background: url("/static/img/trip_icons.png?v=2") no-repeat 0 -132px;
    cursor: pointer;
    color: #ffffff;
    float: right;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    margin: -10px 0 0 0;
    text-indent: 14px;
    width: 47px;
}

.popup .content {
    padding: 3px 0 0 30px;
}

.popup .error {
    color: #ff0000;
    font-size: 12px;
    height: 20px;
    padding-left: 80px;
}

.popup .sub-title {
    height: 29px;
    line-height: 29px;
    color: #999999;
}

.popup .form-row {
    height: 49px;
}

.popup .form-row .label {
    width: 80px;
    height: 29px;
    line-height: 29px;
    color: #999999;
}

.popup .form-button-row {
    padding: 6px 0 0 85px;
}

#friend-request-popup,
#new-trip-popup {
    position: relative;
}

#friend-request-popup .title,
#new-trip-popup .title {
    padding: 20px 0 0 30px;
    float: left;
    color: #4abdcc;
}

#friend-request-popup .close,
#new-trip-popup .close {
    background: url("/static/img/trip_icons.png?v=2") no-repeat 0 -132px;
    cursor: pointer;
    color: #ffffff;
    float: right;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    margin: 10px 0 0 0;
    text-indent: 14px;
    width: 47px;
}

#friend-request-popup .content,
#new-trip-popup .content {
    width: 350px;
    float: left;
}

#new-trip-popup .new-trip-name {
    background: #eaeaea;
    border: 1px solid #eaeaea;
    height: 22px;
    padding: 2px 5px;
    width: 200px;
}

#new-trip-popup #new-trip-name {
    background: #eaeaea;
    border: 0px solid #eaeaea;
    font-size: 14px;
    height: 20px;
    width: 200px;
}

#new-trip-popup .privacy {
    background: #eaeaea;
    border: 1px solid #eaeaea;
    border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    -webkit-border-radius: 0;
    height: 18px;
    padding: 4px 0 4px 5px;
    width: 95px;
    *background: transparent;
    *border: medium none;
    *padding: 5px 0 0 1px;
}

#new-trip-popup #privacy {
    -webkit-appearance: button;
    background: #eaeaea;
    border: 0px solid #eaeaea;;
    font-size: 14px;
    width: 95px;
    *background: transparent;
}

#new-trip-popup .new-trip-confirm {
    background: #4abdcc;
    border: 0px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    height: 32px;
    text-shadow: 1px 1px 1px #5c5c5c;
    width: 96px;
}

#new-trip-popup .new-trip-confirm:hover {
    background: #2e9dab;
}

#friend-request-popup textarea {
    background: #eaeaea;
    border: 0px solid #eaeaea;
    height: 86px;
    resize: none;
    width: 320px;
    overflow: hidden;
}

#friend-request-popup .send-request {
    background: #4abdcc;
    border: 0px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    height: 32px;
    margin-top: 8px;
    text-shadow: 1px 1px 1px #5c5c5c;
    width: 96px;
}

#friend-request-popup .send-request:hover {
    background: #2e9dab;
}

#fill-profile-popup {
    height: 186px;
}

#fill-profile-popup .header {
    padding: 24px 0 10px 30px;
}

#fill-profile-popup .content .icon {
    background: url("/static/img/user_icons.png") no-repeat 0px 0px;
    height: 65px;
    margin-right: 20px;
    width: 36px;
}

#fill-profile-popup .content .form {
    line-height: 20px;
    margin-top: -2px;
    width: 266px;
}

#fill-profile-popup .content a.btn {
    background: #4ABDCC;
    color: white;
    cursor: pointer;
    display: block;
    float: left;
    height: 32px;
    line-height: 32px;
    margin: 17px 14px 0 0;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #5c5c5c;
    width: 96px;
}

#fill-profile-popup .content a.btn:hover {
    background: #2e9dab;
}

#fill-profile-popup .arrow {
    background: url("/static/img/user_icons.png") no-repeat -55px -5px;
    height: 50px;
    position: absolute;
    top: -33px;
    left: 0px;
    width: 35px;
}

#overlay {
    background: #000000;
    height: 100%;
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
}
/* Create new trip popup end */
